<template>
    <layout>
        <div class='wrapper'>
            <van-form class="form" ref="form" v-show="formVisible">
                <van-field
                    name="name"
                    label="姓名"
                    v-model="formData.name"
                    placeholder="请输入姓名"
                    clearable
                   >

                </van-field>

                <van-field
                    name="idCard"
                    label="身份证"
                    v-model="formData.idCard"
                    clearable
                    placeholder="请输入身份证"
                   >

                </van-field>

                <van-field
                    name="reportCode"
                    label="条码号"
                    v-model="formData.reportCode"
                    clearable
                    placeholder="请输入条码号">

                </van-field>
                <div class="tip">提示：请输入姓名+身份证查询，或者输入条码号查询</div>
                <div class="btn">
                    <van-button type="info" block round @click="onSubmit">点 击 查 询</van-button>
                </div>

                <div class="bottom-tip">温馨提示：若超过24小时，仍无法查询到结果，请联系我们！客服热线：400-1512-686！</div>
            </van-form>


            <div class="wait" v-show="waitVisible">
                <span>查询中，请稍等...</span>
            </div>

            <van-empty image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="暂无物流信息，请稍后查询..." v-show="noDataVisible" />

            <div class="result-wrapper" v-show="resultVisible">
                <div class="result">
                    <div>10-25 17:37 &nbsp;&nbsp;<span>标本已送检</span></div>
                    <div>10-25 17:47 &nbsp;&nbsp;<span>标本已到长沙市望城区银星东路</span></div>
                    <div>10-25 17:57 &nbsp;&nbsp;<span>标本已到长沙市望城区潇湘北路</span></div>
                    <div>10-25 18:07 &nbsp;&nbsp;<span>标本已到长沙市望城区北二环</span></div>
                    <div>10-25 18:17 &nbsp;&nbsp;<span>标本已到长沙市望城区中青路</span></div>
                    <div>10-25 18:27 &nbsp;&nbsp;<span>标本已送到长沙人和未来医学检验所</span></div>
                </div>
                
            </div>
            <div class="return-btn" v-show="resultVisible||noDataVisible">
                <van-button type="primary" @click="refresh">返 回</van-button>
            </div>

        </div>
    </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import logisticsApi from "@/api/logistics"
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            // 表单展示
            formVisible:true,
            // 等待展示
            waitVisible:false,
            // 没有数据展示
            noDataVisible:false,
            // 有结果数据展示
            resultVisible:false,
            formData:{
                name:"",
                idCard:"",
                reportCode:"",
            }
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        refresh(){
            location.reload();
        },
        onSubmit(){
            this.formData.reportCode =  this.formData.reportCode.replace(/\s/g,"")
            if(this.formData.reportCode){
                // 这里是通过条码号查询
                this.formVisible = false
                this.waitVisible =true
                if(this.formData.reportCode == 'XG07077450'){
                    setTimeout(()=>{
                        this.resultVisible = true
                        this.waitVisible = false
                    },1000)
                }else{
                    setTimeout(()=>{
                        this.noDataVisible = true
                        this.waitVisible = false
                    },1000)
                }
            }else{
                // 这里通过身份证和姓名查询
                this.formData.name = this.formData.name.replace(/\s/g,"")
                this.formData.idCard = this.formData.idCard.replace(/\s/g,"")
                if(!this.formData.name){
                    this.$dialog.alert({
                        title:"提示",
                        message:"请输入姓名"
                    })
                    return
                }
                if(!this.formData.idCard.length){
                    this.$dialog.alert({
                        title:"提示",
                        message:"请输入身份证"
                    })
                    return
                }

                if(this.formData.idCard.length!=18&&this.formData.idCard.length!=15){
                    this.$dialog.alert({
                        title:"提示",
                        message:"身份证格式输入错误"
                    })
                    return
                }

                this.formVisible = false
                this.waitVisible =true
                if(this.formData.name=="陈业国" && this.formData.idCard == "430123196310071451"){
                    setTimeout(()=>{
                        this.resultVisible = true
                        this.waitVisible = false
                    },1000)
                }else{
                    setTimeout(()=>{
                        this.waitVisible = false
                        this.noDataVisible = true
                    },1000)
                }
                // if (name == '陈业国' && code == '430123196310071451'){
                //     $("#container").hide();
                //     $("#con_tit").hide();
                //     $("#wait").show();
                //     setTimeout(function () {
                //         $("#wait").hide();
                //         $("#hasData").show();
                //     }, 1000);
                // }else{
                //     $("#container").hide();
                //     $("#con_tit").hide();
                //     $("#wait").show();
                //     setTimeout(function () {
                //         $("#wait").hide();
                //         $("#noData").show();
                //     }, 1000);
                // }

            }
            this.formVisible = false
            this.waitVisible = true
            let params = {
                code:this.formData.idCard,
                name:this.formData.name,
                beginTime:"",
                endTime:""
            }
            logisticsApi.reportView(params)
                .then(res=>{
                    if(res.status = 0){
                        if(res.data.length > 1){
                            let url = res.data
                            if(url.lastIndexOf(".pdf") >1 || url.lastIndexOf(".PDF") >-1){
                                url = "/static/pdfjsnew/web/viewer.html?file="+url;
                            }
                            let wo = window.open(url,"_blank")
                            if(wo == null){
                                window.location.href = url;
                            }
                        }else{
                            this.$dialog.alert({
                                title:"提示",
                                message:"检验结果未出，近期因疫情原因导致结果有所延迟，请耐心等候！"
                            })
                        }
                    }else{
                        this.$dialog.alert({
                            title:"提示",
                            message:res.msg
                        })
                    }
                })
                .catch(err=>{
                    this.$dialog.alert({
                        title:"提示",
                        message:err
                    })
                    this.formVisible = true
                    this.resultVisible = false
                    this.noDataVisible = false
                    this.waitVisible = false
                })
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
    .wrapper{
        width: 93%;
        margin: auto;
        
        .form{
            overflow: hidden;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 0 12px rgba(0,0,0,10%);
            .tip{
            font-size: 12px;
            text-align: center;
            padding-top: 10px;
            color: #999999;
            }
            .btn{
                padding: 20px;
            }
            .bottom-tip{
                color: red;
                font-size: 12px;
                padding: 15px;
                text-indent:2em;
                line-height: 20px;
            }
        }
        .wait{
            padding: 100px 0;
            text-align: center;
            font-size: 20px;
        }
        .result-wrapper{
            overflow: hidden;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 0 12px rgba(0,0,0,10%);
            .result{
                font-size: 15px;
                padding: 20px;
                line-height: 24px;
            }
        }
        .return-btn{
            text-align: center;
            margin: 20px auto;
            .van-button{
                width: 140px;
                border-radius: 20px;
            }
        }
        
    }
</style>